<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <title>绑定手机号</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/jquery-weui.css">
    <link rel="stylesheet" href="css/demos.css">
    <link rel="stylesheet" href="css/main.css">
    <script src="js/jquery-2.1.4.js"></script>
    <script src="js/jquery-weui.js"></script>
    <script src="wxJs/utils/storage.js"></script>
    <script src="wxJs/utils/contain.js"></script>
    <style>
        html,
        body {
            width: 100%;
            height: 100%;
        }

        body {
            /*background: url('images/ls1.jpg');*/
            /*background-size: 100% 100%;*/
            display: flex;
            justify-content: center;
            background-color: #fff;
        }

        .form_login {
            color: #fff;
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .shop_name {
            text-align: center;
            margin-top: 10%;
        }

        .login_item {
            border-bottom: 1px solid #d0d0d0;
            display: flex;
            align-items: center;
            margin-bottom: 10px;
            color: #666;
        }

        .login_item input {
            background-color: rgba(0, 0, 0, 0);
            border: 0;
            outline: none;
            flex: 1;
            font-size: 16px;
            padding-left: 15px;
            color: #666;
        }

        .login_item i {
            font-size: 30px;

        }

        .login_content {
            margin-top: 5%;
            width: 80%;
        }

        .login_submint {
            width: 65%;
            height: 40px;
            font-size: 18px;
            color: #fff;
            background: linear-gradient(#00CED1, #48D1CC);
            border: 0;
            border-radius: 20px;
            margin-top: 10px;
            outline: none;
        }

        .code {
            width: 150px;
        }

        .verification {
            min-width: 100px;
            background: rgba(0, 0, 0, 0);
            border: 0;
            color: #fff;
            text-align: right;
            outline: none;
            color: #666;
        }

        .register {
            margin: 15px 0;
            font-size: 14px;
        }

        input::-webkit-input-placeholder {
            font-size: 14px;
        }

        input::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            font-size: 14px;
        }

        input:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            font-size: 14px;
        }

        input:-ms-input-placeholder {
            /* Internet Explorer 10-11 */
            font-size: 14px;
        }

        .shop_name img {
            height: 150px;
        }
    </style>
</head>

<body>
<div class="form_login">
    <div class="shop_name">
        <img src="images/logo1.jpg" alt="">
    </div>
    <div class="login_content loginGo">
        <div class="login_item">
            <i class="iconfont icon-shoujihao1"></i>
            <input type="text" placeholder="请输入手机号" id="phone">
        </div>
        <div class="login_item">
            <i class="iconfont icon-yanzhengma2"></i>
            <input type="text" class="code" placeholder="请输入验证码" id="messageCode">
            <button class="verification">获取验证码</button>
        </div>
    </div>
    <button class="login_submint">提交</button>
</div>
</body>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-weui.js"></script>
<script src="js/swipe.js"></script>
<script>
    var ran = ""
    var phoneNum=""
    var userId = GetQueryString("userId");
    var goType = GetQueryString("goType");
    if (!userId) {
        window.history.back(-1);
    }

    $(function () {
        //queryUserInfo()    //查询用户
        $.toast("绑定手机号消费能获得积分")
        // 注册账号
        // 登录
        $('.login_submint').on('click', function () {
            var messageCode = $('#messageCode').val();

            if (!ran && !messageCode) {
                $.toast("验证码为空","forbidden")
                return false;
            }
            if (ran == messageCode) {
                var toUrl = getWeiContextPath() + "/wx/VipUser/toPhone";
                $.ajax({
                    type: "POST",
                    cache: false,
                    data: {phoneNum: phoneNum,id:userId},
                    async: false,
                    url: toUrl,
                    success: function (result) {
                        //window.location.href = "me.html?userId="+userId   //跳轉頁面
                        $.toast("绑定成功",function () {
                            if (goType=='1'){
                                window.history.back(-1);
                            } else {
                                window.location.href = "me.html?userId="+userId
                            }

                        })

                    },
                    error: function (result) {
                        $.toast("网络走丢了","forbidden")
                    }
                });
            } else {
                $.toast("验证码错误","forbidden")
            }


        })

        // 获取验证码
        $(".verification").on("click", function () {
            var phone = $("#phone").val()
            if (!phone) {
                $.toast("请输入手机号","forbidden")
                return
            }
            var re = /^1\d{10}$/
            if (!re.test(phone)) {
                $.toast("手机号格式错误！","forbidden");
            } else {
                timedown(60);
                $.toast("验证码已发送至手机")
               phoneNum = phone
                var url = getWeiContextPath() + "/wx/VipUser/getCode"
                $.ajax({
                    type: "POST",
                    cache: false,
                    data: {phone: phone},
                    async: false,
                    url: url,
                    success: function (res) {
                        ran = res.ran;
                    },
                    error: function (res) {
                        $.toast(res.msg,"forbidden")
                    }
                });
            }
        })
    })



    function queryUserInfo() {
        $.post(getWeiContextPath()+"/wx/VipUser/queryUser",{userId:userId},function (res) {
            if (res.code==0){
                if (res.data.phoneNum){
                    window.history.back(-1);
                }else {
                    $.toast("绑定手机号消费能获得积分")
                }
            }else {
                window.history.back(-1);
            }
        })
    }

    //倒计时
    function timedown(time) {
        if (time == 'undefined')
            time = 60;

        time = time - 1;
        if (time >= 0) {
            setTimeout(function () {
                timedown(time)
            }, 1000)
            $(".verification").text(time + '后可重新发送');
            $(".verification").attr("disabled", true);
        } else {
            $(".verification").text('重新发送');
            $(".verification").attr("disabled", false);
        }
    }

</script>

</html>